import React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import { IMainMenu } from '@/models/IMainMenu';
import styles from "./MainMenu.less"
import { Icon } from 'antd';
import { SubMenuC } from './SubMenuC';

export class MainMenu extends React.Component<IMainMenuProps> {

    render() {
        return <div className={styles.menuControl} onMouseLeave={() => this.props.onLevel1MenuMouseLeave?.()}>
            <div className={styles.firstMenu}>
                {this.props.level1.map((item, index) => {
                    return (
                        !item.isHide && (
                            <div key={index}
                                className={`${styles.item} ${this.props.level1SelectedId == item.id ? styles.active : ""}`}
                                onMouseOver={() => {
                                    this.props.onLevel1MenuMouseOver?.(item)
                                    //this.levelOneId = item.id ?? ""
                                }}
                            >
                                <div><Icon type="audit" style={{ fontSize: '20px' }}></Icon></div>
                                <div><span className={styles.title}>{item.name?.substring(0, 4)}</span></div>
                            </div>
                        )
                    );
                })}
            </div>
            <div className={styles.subMenu}>
                <SubMenuC disableLink={this.props.disableLink}
                    parentId={this.props.level1SelectedId}
                    children={this.props.allMenus.find(m => m.id == this.props.level1SelectedId)?.children}
                    onClick={menu => this.props.onClick?.(menu)} />
            </div>
        </div>
    }

}

export interface IMainMenuProps {
    /**一级菜单 */
    level1: IMainMenu[]
    /**一级选中菜单 */
    level1SelectedId?: string
    /**全部菜单 */
    allMenus: IMainMenu[]
    disableLink?: boolean

    onLevel1MenuMouseOver?: (menu: IMainMenu) => void
    onLevel1MenuMouseLeave?: () => void
    onClick?: (menu: IMainMenu) => void
}